<template>
    <div class="management">
        <el-row>
            <el-col :span="4" style="text-align: left">
                <el-button type="primary" size="medium" @click="provideSalaryFun">工资发放提醒</el-button>
            </el-col>
            <el-col :span="4" :offset="10">
                <el-date-picker
                        size="medium"
                        type="date"
                        placeholder="请输入日期"
                        v-model="inputDate">
                </el-date-picker>
            </el-col>
            <el-col :span="4">
                <el-input
                        size="medium"
                        placeholder="请输入员工姓名"
                        v-model="inputName">
                </el-input>
            </el-col>
            <el-col :span="2" style="text-align: right">
                <el-button type="primary" size="medium"  icon="el-icon-search" @click="selectStaff">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="min-height: 336px">
                <el-table
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        :data="currentData"
                        border
                        ref="multipleTable"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="wageId"
                            label="工资单号">
                    </el-table-column>
                    <el-table-column
                            prop="staffId"
                            label="员工工号">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="staffSalary"
                            label="基本工资">
                    </el-table-column>
                    <el-table-column
                            prop="bonus"
                            label="绩效奖金">
                    </el-table-column>
                    <el-table-column
                            prop="subsidy"
                            label="工资补贴">
                    </el-table-column>
                    <el-table-column
                            prop="wage"
                            label="实发工资">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="reviseSalaryFun(scope.row,scope.$index)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div class="pages">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
        <el-dialog
                title="修改员工工资"
                :visible.sync="centerDialogVisibles"
                :close-on-click-modal = 'false'
                width="30%"
                center>
            <div><span>工资单号：</span><el-input v-model="wageId" :disabled="true"></el-input></div>
            <div><span>员工工号：</span><el-input v-model="staffId" :disabled="true"></el-input></div>
            <div><span>姓名：</span><el-input v-model="name" :disabled="true"></el-input></div>
            <div><span>基本工资：</span><el-input v-model="staffSalary"></el-input></div>
            <div><span>绩效奖金：</span><el-input v-model="bonus"></el-input></div>
            <div><span>工资补贴：</span><el-input v-model="subsidy"></el-input></div>
            <div><span>实发工资：</span><el-input v-model="reality" :disabled="true"></el-input></div>
            <span slot="footer" class="dialog-footer">
                   <el-button @click="centerDialogVisibles = false">取 消</el-button>
                   <el-button type="primary" @click="reviseSalaryConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "wageManagementPage",
        data(){
            return{
                inputDate:'',
                inputName:'',
                salaryIndex:null,
                currentPage:1,
                pageNums:2,
                pageData:[],
                multipleSelection: [],
                centerDialogVisibles:false,
                wageId:null,
                staffId:null,
                name:null,
                staffSalary:0,
                bonus:0,
                subsidy:0,
                userIdData:[],
                operation: {userName:this.$store.state.user.userName, operationDate:'', operationMessage:''},
            }
        },
        components:{

        },
        computed:{
            currentData(){
                return this.pageData
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                        let obj ={
                            pageCount:5,
                            pageSize:that.currentPage,
                        }
                        that.getPageWage(obj)
                            .then(resp=>{
                                if(resp.Code === 200){
                                    that.pageData = resp.wageList
                                    that.pageNums = resp.totalPage
                                }
                            })
                            .catch(err=>{
                                console.log(err)
                            })
                    },
                    pageCount:that.pageNums,//一共多少页
                }
                return data
            },
            reality(){
                return Number(this.staffSalary) + Number(this.bonus) + Number(this.subsidy)
            }
        },
        methods:{
            ...mapActions(['getPageWage','selectWage','reviseSalaryWage','provideSalaryWage','userOperation']),
            selectStaff(){
                if(this.inputDate === '' && this.inputName === ''){
                    this.$message.error('员工或日期不能为空！')
                }else {
                    let obj ={
                        name:this.inputName,
                        startTime:this.inputDate,
                        pageCount:5,
                        pageSize:1,
                    }
                    this.selectWage(obj)
                        .then(resp=>{
                            if(resp.Code === 200){
                                this.pageData = resp.wageList
                                this.pageNums = resp.totalPage
                                this.operation.operationMessage = '查询员工工资'
                                this.operation.operationDate = this.$store.state.nowTime.time
                                this.userOperation(this.operation)
                            }else if(resp.Code === 400){
                                this.$message.error('查询失败！')
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }
            },
            handleSelectionChange(val) {
                this.userIdData = []
                this.multipleSelection = val;
                for(let value of this.multipleSelection){
                    this.userIdData.push(value.staffId)
                }
            },
            reviseSalaryFun(obj,index){
                this.centerDialogVisibles = true
                this.wageId = obj.wageId
                this.staffId = obj.staffId
                this.name = obj.name
                this.staffSalary = obj.staffSalary
                this.bonus = obj.bonus
                this.subsidy = obj.subsidy
                this.salaryIndex = index
            },
            reviseSalaryConfirm(){
                let obj = {
                    wageId:this.wageId,
                    staffId:this.staffId,
                    name:this.name,
                    staffSalary:Number(this.staffSalary),
                    bonus:Number(this.bonus),
                    subsidy:Number(this.subsidy),
                    wage:this.reality
                }
                this.reviseSalaryWage(obj)
                    .then(resp=>{
                        if(resp.Code === 200){
                            this.$message.success({message: '修改成功！'})
                            this.pageData.splice(this.salaryIndex,1,obj)
                            this.operation.operationMessage = '修改员工' + this.name + '工资'
                            this.operation.operationDate = this.$store.state.nowTime.time
                            this.userOperation(this.operation)
                        }else if(resp.Code === 400){
                            this.$message.error('修改失败！')
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                this.centerDialogVisibles = false
            },
            provideSalaryFun(){
                if(this.userIdData.length >= 1) {
                    this.$message.success('发放成功！')
                    this.operation.operationMessage = '发放员工工资'
                    this.operation.operationDate = this.$store.state.nowTime.time
                    this.userOperation(this.operation)
                    // this.provideSalaryWage(this.userIdData)
                    //     .then(resp=>{
                    //         if(resp.Code === 200){
                    //             this.$message.success('发放成功！')
                    //             this.operation.operationMessage = '发放员工工资'
                    //             this.operation.operationDate = this.$store.state.nowTime.time
                    //             this.userOperation(this.operation)
                    //         }else if(resp.Code === 400){
                    //             this.$message.error('发放失败！')
                    //         }
                    //     })
                    //     .catch(err=>{
                    //         console.log(err)
                    //     })
                }else {
                    this.$message.error('请选择员工！')
                }

            }
        },
        mounted() {
            let obj ={
                pageCount:5,
                pageSize:1,
            }
            this.getPageWage(obj)
                .then(resp=>{
                    if(resp.Code === 200){
                        this.pageData = resp.wageList
                        this.pageNums = resp.totalPage
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
        }
    }
</script>

<style scoped lang="less">
    .management{
        margin-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .el-input{
                    margin-left: 10px;
                    width: 80%;
                }
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
            }
            .el-table{
                margin: 20px auto 0;
            }
        }
        .el-dialog{
            #message{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
            .dialog-footer{
                width: 100%;
            }
            div{
                text-align: center;
                margin: 10px auto;
                span{
                    display: inline-block;
                    text-align: center;
                    width: 20%;
                }
                .el-input{
                    display: inline-block;
                    text-align: center;
                    width: 60%;
                }
            }
        }
    }
</style>